<script setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useHomeDataStore } from '../stores/index.js';

const route = useRoute();
const router = useRouter();
const store = useHomeDataStore();
const tags = computed(() => store.state.tags);
console.log(tags.value);
const handlMenu = (tag) => {
  console.log('Clicked tag:', tag);
  router.push({
    name: tag.name,
  });
  store.selectMenu(tag);
};
const handleColose = (tag, index) => {
  store.updateMenu(tag);
  //如果点击的关闭的tag不是当前页面，直接关闭
  if (tag.name !== route.name) {
    return;
  }
  if (index === store.state.tags.length) {
    store.selectMenu(tags.value[index - 1]);
    router.push({
      name: tags.value[index - 1].name,
    });
  } else {
    store.selectMenu(tags.value[index]);
    router.push({ name: tags.value[index].name });
  }
};
</script>

<template>
  <div class="tags">
    <el-tag
      v-for="(tag, index) in tags"
      :key="tag.name"
      :closable="tag.name !== 'home'"
      :effect="route.name === tag.name ? 'dark' : 'plain'"
      @click="handlMenu(tag)"
      @close="handleColose(tag, index)"
    >
      {{ tag.title }}
    </el-tag>
  </div>
</template>

<style scoped lang="less">
.tags {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  margin-left: 20px;
  margin-bottom: 1px;
  border-radius: 8px;
  background-color: #f5f5f5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.el-tag {
  margin-right: 10px;
  line-height: 30px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  transition: all 0.3s ease;

  /* 为 tag 添加阴影 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* 鼠标悬浮时改变颜色 */
  &:hover {
    background-color: #f0f0f0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  /* 激活标签的颜色 */
  &.el-tag--plain {
    background-color: #ffffff;
    color: #409eff;
  }

  &.el-tag--dark {
    background-color: #409eff;
    color: white;
  }

  /* 当标签不可关闭时，禁用关闭按钮 */
  &.is-disabled .el-tag__close {
    display: none;
  }

  /* 自定义关闭按钮样式 */
  .el-tag__close {
    color: #909399;
    cursor: pointer;
    transition: color 0.3s ease;

    &:hover {
      color: #ff4d4f;
    }
  }
}

/* 弹性布局的容器，确保标签在父容器内居中对齐 */
.tags {
  display: flex;
  flex-wrap: wrap; /* 确保标签换行显示 */
  gap: 8px;
}

/* 对于标签的标题部分 */
.el-tag span {
  display: inline-block;
  padding: 2px 10px;
  font-size: 16px;
  font-weight: 500;
}
</style>
